
<template>
  <div class="login">
    <div class="logoBox">
      <img class="logo" src="@/assets/logo.svg" alt />
      <span class="logoTitle">移动端模版</span>
      <!-- <div class="title">您好，欢迎登录！</div> -->
    </div>
    <div class="loadingBox" v-if="state.loadingShow">
      <van-loading color="#1989fa" />
    </div>
    <div class="login-body">
      <van-form @submit="onSubmit" class="formBox">
        <van-field
          v-model="state.username"
          name="username"
          placeholder="请填写用户名"
          left-icon="manager"
          :center="true"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="state.password"
          type="password"
          name="password"
          placeholder="请填写密码"
          left-icon="lock"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <!-- <van-field center clearable label="验证码" placeholder="输入验证码" v-model="state.verify">
          <template #button>
            <vue-img-verify ref="verifyRef" />
          </template>
        </van-field> -->
        <div>
          <van-button class="subBtn" round block type="info" native-type="submit">登录</van-button>
          <div class="register-box">
            <span>没有账号？</span>
            <span class="register-btn" @click="toggle('register')">点击此处注册</span>
          </div>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import sHeader from "@/components/SimpleHeader.vue";
import vueImgVerify from "@/components/VueImageVerify.vue";
import { login, register } from "@/service/user";
import { setLocal } from "@/common/js/utils";
import md5 from "js-md5";
import { useRouter } from "vue-router";
const router = useRouter();
import { showSuccessToast, showFailToast } from "vant";
import { useStore } from "@/stores/user";

const verifyRef = ref(null);
const state = reactive({
  loadingShow: false,
  username: "",
  password: "",
  username1: "",
  password1: "",
  type: "login",
  imgCode: "",
  verify: "",
});
const store = useStore();
// 切换登录和注册两种模式
const toggle = (v) => {
  // state.type = v;
  // state.verify = "";
};

// 提交登录或注册表单
const onSubmit = async (values) => {
  // state.imgCode = verifyRef.value.state.imgCode || "";
  // if (state.verify.toLowerCase() != state.imgCode.toLowerCase()) {
  //   showFailToast("验证码有误");
  //   return;
  // }
  if (state.type == "login") {
    state.loadingShow = true;
    const obj = { username: state.username, password: state.password };
    store
      .login(obj)
      .then(() => {
        state.loadingShow = false;
        router
          .push({
            path: "/",
          })
          .catch(() => {});
      })
      .catch(() => {
        state.loadingShow = false;
      });
  } else {
    await register({
      loginName: values.username1,
      password: values.password1,
    });
    showSuccessToast("注册成功");
    state.type = "login";
    state.verify = "";
  }
};
</script>

<style lang="less">
@font-face {
  font-family: DFPZongYiW7;
  src: url("@/assets/font/DFPZongYiW7.TTF");
}
.loadingBox {
  // width: 100%;
  // height: 100%;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  position: fixed;
  top: 550px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
}
.formBox {
  .van-field {
    width: 634px;
    height: 100px;
    opacity: 1;
    border-radius: 20px;
    background: rgba(244, 248, 251, 1);
    font-size: 28px;
    font-weight: 500;
    color: #a6a6a6;
    margin: auto;
    margin-bottom: 40px;
  }
  ::v-deep.van-field__left-icon {
    margin-right: 24px;
  }
}
.login {
  .logoBox {
    box-sizing: border-box;
    width: 100%;
    padding-top: 292px;
    text-align: center;
    padding-bottom: 80px;
    background-image: url("@/assets/main-bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .logoTitle {
      font-family: DFPZongYiW7;
      font-size: 50px;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
      vertical-align: middle;
      margin-left: 40px;
    }
    .logo {
      width: 110px;
      height: 88px;
      vertical-align: middle;
    }
  }

  .login-body {
    .inputLabel {
      font-size: 32px;
      font-weight: 500;
      letter-spacing: 0px;
      line-height: 44.8px;
      color: rgba(51, 51, 51, 1);
    }
    .inputLabel2 {
      margin-top: 25px;
    }
    .subBtn {
      width: 630px;
      height: 90px;
      line-height: 90px;
      border-radius: 20px;
      background: #26acff;
      font-size: 30px;
      font-weight: 700;
      letter-spacing: 4px;
      color: rgba(255, 255, 255, 1);
      margin: auto;
      margin-top: 80px;
      border: none;
    }
    .register-box {
      // width: 286px;
      height: 60px;
      line-height: 60px;
      margin: auto;
      margin-top: 40px;
      /** 文本1 */
      font-size: 26px;
      font-weight: 500;
      letter-spacing: 0px;
      line-height: 60px;
      color: rgba(166, 166, 166, 1);
      /** 文本2 */
      text-align: center;
      .register-btn {
        color: rgba(38, 172, 255, 1);
      }
    }
  }
  //***************滑块样式**** */
  .verify {
    box-sizing: border-box;
    touch-action: none;
    height: 120px;
    margin-top: 48px;
    padding-top: 20px;
  }
  ::v-deep .verify-bar-area {
    width: 100% !important;
    .verify-left-bar {
      // background: linear-gradient(160.78deg, rgba(29, 178, 255, 1) 0%, rgba(4, 123, 255, 1) 100%) !important;
      // border-color: rgba(29, 178, 255, 1);
    }
    .verify-move-block {
      // background-color: rgba(29, 178, 255, 1) !important;
      // background: linear-gradient(160.78deg, rgba(29, 178, 255, 1) 0%, rgba(4, 123, 255, 1) 100%) !important;
      color: #fff;
    }
  }
}
</style>
